<template>
  <!-- 搜索表单 -->
  <el-card shadow="never" v-if="isSearch" style="margin-bottom: 16px;">
    <div slot="header" class="clearfix">
      <span>搜索条件</span>
    </div>
    <el-collapse-transition>
      <div v-if="searchShowInner">
        <el-form
          label-width="auto"
          :size="size"
          label-position="right"
          :inline="true"
          :model="form"
          class="form-inline"
        >
          <el-form-item
            v-if="!field.hidden"
            v-for="(field, index) in fields"
            :key="index"
            :label="field.name"
            :label-width="formLabelWidth"
          >
            <template v-if="field.type === 'select'">
              <el-select clearable v-model="form[field.field]">
                <template v-for="(codeType, index) in getCodeTypeMap(field)">
                  <el-option :value="codeType.value" :key="index" :label="codeType.name"></el-option>
                </template>
              </el-select>
            </template>
            <template v-else-if="field.type === 'date'">
              <el-date-picker
                v-model="form[field.field]"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              ></el-date-picker>
            </template>
            <template v-else-if="field.type === 'time'">
              <el-date-picker
                v-model="form[field.field]"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
              ></el-date-picker>
            </template>
            <template v-else>
              <el-input v-model="form[field.field]" :placeholder="field.name"></el-input>
            </template>
          </el-form-item>
          <el-form-item label=" " :label-width="formLabelWidth">
            <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
            <el-button @click="formReset" icon="el-icon-refresh">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-collapse-transition>
  </el-card>
</template>

<script>
export default {
  props: {
    isSearch: {
      type: Boolean,
      default: false
    },

    fields: {
      type: Array,
      default: function () {
        return []
      }
    },

    form: {
      type: Object,
      default: function () {
        return {}
      }
    },

    formLabelWidth: '100px',

    // 尺寸
    size: {
      type: String,
      default: () => {
        return 'small'
      }
    }
  },

  data () {
    return {
      searchShowInner: true
    }
  },

  methods: {
    // 取得代码类型列表
    getCodeTypeMap (field) {
      return this.$store.state.cache.codeInfo[field.codeType]
    },

    search () {
      this.$emit('search')
    },

    // 表单重置
    formReset () {
      this.$emit('reset')
    }
  }
}

</script>
<style lang='scss' scoped>
.form-inline {
  width: auto;
}
</style>
